/*! _projects.scss | Vuero | Css ninja 2020-2021 */

/*
    1. Projects Toolbar
    2. Projects Grid
    3. Projects Grid Dark mode
    4. Projects Grid V2
    5. Projects Grid V2 dark mode
    6. Projects Grid V3 dark mode
    7. Media Queries
*/

/* ==========================================================================
2. Projects Grid
========================================================================== */

.all-projects {
  .section-heading {
    font-family: var(--font-alt);
    font-size: 0.85rem;
    text-transform: uppercase;
    color: var(--light-text);
    margin-bottom: 1rem;
  }

  .project-grid {
    margin-bottom: 1.5rem;

    .project-grid-item {
      @include vuero-s-card();

      text-align: center;
      box-shadow: none;

      &:hover {
        border-color: var(--fade-grey-dark-6);
        box-shadow: var(--light-box-shadow);

        .project-avatar {
          filter: grayscale(0);
          opacity: 1;
        }
      }

      .project-avatar {
        display: block;
        height: 40px;
        width: 40px;
        border-radius: 10px;
        margin: 0 auto 10px auto;
        filter: grayscale(1);
        opacity: 0.6;
        transition: all 0.3s;
      }

      h3 {
        font-size: 0.95rem;
        font-family: var(--font-alt);
        font-weight: 600;
        color: var(--dark-text);
      }

      p {
        font-size: 0.9rem;
        margin-bottom: 10px;
      }
    }
  }
}

/* ==========================================================================
3. Projects Grid dark mode
========================================================================== */

.is-dark {
  .all-projects {
    .project-grid {
      .project-grid-item {
        @include vuero-card--dark();

        h3 {
          color: var(--dark-dark-text);
        }
      }
    }
  }
}

/* ==========================================================================
4. Projects Grid V2
========================================================================== */

.all-projects {
  .all-projects-header {
    display: flex;
    padding: 20px;
    background: var(--white);
    border: 1px solid var(--fade-grey-dark-3);
    border-radius: var(--radius-large);
    margin-bottom: 1.5rem;

    .header-item {
      width: 25%;
      border-right: 1px solid var(--fade-grey-dark-3);

      &:last-child {
        border-right: none;
      }

      .item-inner {
        text-align: center;

        .lnil,
        .lnir {
          font-size: 2.2rem;
          margin-bottom: 6px;
          color: var(--primary);
        }

        span {
          display: block;
          font-family: var(--font);
          font-weight: 600;
          font-size: 1.4rem;
          color: var(--dark-text);
        }

        p {
          font-family: var(--font-alt);
        }
      }
    }
  }

  .projects-card-grid {
    .grid-item {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 220px;
      padding: 20px;
      background: var(--white);
      border: 1px solid var(--fade-grey-dark-3);
      border-radius: var(--radius-large);

      .top-section {
        .head {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 8px;

          h3 {
            font-size: 1rem;
            font-family: var(--font-alt);
            color: var(--dark-text);
            font-weight: 600;
          }
        }

        .body {
          p {
            font-family: var(--font);
            color: var(--light-text);
          }
        }
      }

      .bottom-section {
        display: flex;

        .foot-block {
          margin-right: 30px;

          .heading {
            font-family: var(--font-alt);
            font-size: 0.75rem;
            color: var(--light-text-dark-22);
          }

          > p {
            padding-top: 5px;
          }

          .developers {
            display: flex;

            .v-avatar {
              margin-right: 6px;
            }
          }
        }
      }
    }
  }
}

/* ==========================================================================
5. Projects Grid V2 dark mode
========================================================================== */

.is-dark {
  .all-projects {
    .all-projects-header {
      background: var(--dark-sidebar-light-6);
      border-color: var(--dark-sidebar-light-12);

      .header-item {
        border-color: var(--dark-sidebar-light-18);

        span {
          color: var(--dark-dark-text);
        }

        i {
          color: var(--primary) !important;
        }
      }
    }

    .projects-card-grid {
      .grid-item {
        background: var(--dark-sidebar-light-6);
        border-color: var(--dark-sidebar-light-12);

        .top-section {
          .head {
            h3 {
              color: var(--dark-dark-text);
            }
          }
        }

        .bottom-section {
          .foot-block {
            .heading {
              color: var(--light-text-dark-12);
            }
          }
        }
      }
    }
  }
}

/* ==========================================================================
5. Projects Grid V3
========================================================================== */
.is-navbar {
  .all-projects {
    padding-top: 20px;
  }
}

.all-projects {
  .illustration-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    img {
      display: block;
      max-width: 260px;
    }

    .header-stats {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex-grow: 2;

      .stats-inner {
        display: flex;
        align-items: center;
        padding: 20px;
        background: var(--white);
        border: 1px solid var(--fade-grey-dark-3);
        border-radius: var(--radius-large);

        .stat-item {
          text-align: center;
          margin: 0 20px;

          span {
            position: relative;
            display: block;
            font-family: var(--font);
            font-weight: 600;
            font-size: 2rem;
            color: var(--dark-text);
            line-height: 1;
            width: 75px;
            margin: 0 auto;

            &::after {
              content: '';
              position: absolute;
              top: 0;
              right: 6px;
              height: 8px;
              width: 8px;
              border-radius: var(--radius-rounded);
            }

            &.is-success {
              &::after {
                background: var(--success);
              }
            }

            &.is-info {
              &::after {
                background: var(--info);
              }
            }

            &.is-warning {
              &::after {
                background: var(--warning);
              }
            }

            &.is-primary {
              &::after {
                background: var(--primary);
              }
            }
          }

          p {
            font-family: var(--font-alt);
            font-size: 0.9rem;
            color: var(--light-text);
          }
        }
      }
    }
  }

  .recent-projects {
    padding: 20px 0;

    .recent-heading {
      font-family: var(--font-alt);
      font-size: 0.8rem;
      font-weight: 500;
      text-transform: uppercase;
      color: var(--light-text);
      margin-bottom: 1rem;
    }

    .project-box {
      display: flex;
      align-items: center;
      padding: 20px;
      background: var(--white);
      border: 1px solid var(--fade-grey-dark-3);
      border-radius: 8px;
      transition: all 0.3s;

      &:hover {
        box-shadow: var(--light-box-shadow);
      }

      h3 {
        font-family: var(--font-alt);
        font-size: 1.1rem;
        font-weight: 600;
        color: var(--dark-text);
        margin-left: 16px;
        line-height: 1.2;
      }
    }
  }

  .project-minimal-grid {
    .grid-header {
      display: flex;
      align-items: center;
      justify-content: space-between;

      h3 {
        font-family: var(--font-alt);
        font-size: 1.5rem;
        font-weight: 700;
        color: var(--dark-text);
        margin-left: 16px;
        line-height: 1.2;
      }

      .filter {
        display: flex;
        align-items: center;
        background: var(--white);
        padding: 8px 24px;
        border-radius: 100px;

        > span {
          font-family: var(--font-alt);
          font-size: 0.85rem;
          font-weight: 600;
          color: var(--dark-text);
          margin-right: 20px;
        }

        .multiselect {
          min-width: 170px;

          .multiselect-input {
            border: none;
          }
        }
      }
    }

    .grid-body {
      padding: 20px 0;

      .grid-item {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 26px;
        background: var(--white);
        border: 1px solid var(--fade-grey-dark-3);
        border-radius: 8px;
        transition: all 0.3s;

        &:hover {
          box-shadow: var(--light-box-shadow);

          .item-title {
            h3 {
              opacity: 0.6;
            }
          }
        }

        .item-head {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-family: var(--font);

          .type {
            text-transform: uppercase;
            color: var(--light-text);
            font-size: 0.8rem;
            font-weight: 600;
          }

          .status {
            text-transform: uppercase;
            font-size: 0.75rem;
            font-family: var(--font-alt);
            font-weight: 600;

            &.is-success {
              color: var(--success);
            }

            &.is-info {
              color: var(--info);
            }

            &.is-warning {
              color: var(--warning);
            }

            &.is-danger {
              color: var(--danger);
            }
          }
        }

        .item-title {
          padding: 40px 0 40px 0;

          h3 {
            font-family: var(--font-alt);
            font-size: 1.3rem;
            font-weight: 700;
            color: var(--dark-text);
            line-height: 1.2;
            margin-bottom: 8px;
            transition: all 0.3s;
          }
        }

        .item-description {
          p {
            font-size: 1rem;
          }

          .item-people {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding-top: 20px;

            .label {
              font-family: var(--font);
              color: var(--light-text);
              font-weight: 400;
            }
          }
        }
      }
    }
  }
}

/* ==========================================================================
6. Projects Grid V3 dark mode
========================================================================== */

.is-dark {
  .all-projects {
    .illustration-header {
      .header-stats {
        .stats-inner {
          background: var(--dark-sidebar-light-6);
          border-color: var(--dark-sidebar-light-12);

          .stat-item {
            span {
              color: var(--dark-dark-text);
            }
          }
        }
      }
    }

    .recent-projects {
      .project-box {
        background: var(--dark-sidebar-light-6);
        border-color: var(--dark-sidebar-light-12);

        h3 {
          color: var(--dark-dark-text);
        }
      }
    }

    .project-minimal-grid {
      .grid-header {
        h3 {
          color: var(--dark-dark-text);
        }

        .filter {
          background: var(--dark-sidebar-light-1) !important;
          border-color: var(--dark-sidebar-light-4) !important;

          > span {
            color: var(--dark-dark-text);
          }
        }
      }

      .grid-body {
        .grid-item {
          background: var(--dark-sidebar-light-6);
          border-color: var(--dark-sidebar-light-12);

          .item-title {
            h3 {
              color: var(--dark-dark-text);
            }
          }

          .v-avatar {
            img {
              border-color: var(--dark-sidebar-light-6);
            }
          }
        }
      }
    }
  }
}

/* ==========================================================================
7. Media Queries
========================================================================== */

@media only screen and (max-width: 767px) {
  .all-projects {
    .all-projects-header {
      flex-direction: column;

      .header-item {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--fade-grey-dark-3);
        padding: 16px 0;

        &:last-child {
          border-bottom: none;
        }
      }
    }

    .projects-card-grid {
      .grid-item {
        .bottom-section {
          flex-wrap: wrap;

          .foot-block {
            &:first-child {
              width: 100%;
              margin: 0;
              text-align: center;
              padding: 16px 0;

              .developers {
                justify-content: center;

                .v-avatar {
                  margin: 0 4px;
                }
              }
            }

            &:not(:first-child) {
              width: 33.3%;
              text-align: center;
              margin: 0;
            }
          }
        }
      }
    }

    .illustration-header {
      > img {
        display: none !important;
      }

      .header-stats {
        .stats-inner {
          flex-wrap: wrap;

          .stat-item {
            width: 50%;
            margin: 0;
            padding: 16px 0;
          }
        }
      }
    }

    .project-minimal-grid {
      .grid-header {
        .filter {
          display: none;
        }
      }
    }
  }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .all-projects {
    .illustration-header {
      > img {
        display: none !important;
      }

      .header-stats {
        .stats-inner {
          width: 100%;

          .stat-item {
            width: 25%;
          }
        }
      }
    }

    .project-minimal-grid {
      .grid-body {
        display: flex;

        .column {
          min-width: 50%;
        }
      }
    }
  }
}

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .all-projects {
    .illustration-header {
      .header-stats {
        .stats-inner {
          .stat-item {
            width: 25%;
          }
        }
      }
    }

    .recent-projects {
      .project-box {
        h3 {
          font-size: 1.1rem;
        }
      }
    }

    .project-minimal-grid {
      .grid-body {
        .grid-item {
          .item-title {
            padding: 30px 0;

            h3 {
              font-size: 1.5rem;
            }
          }
        }
      }
    }

    .projects-card-grid {
      .grid-item {
        .bottom-section {
          margin-top: 0.75rem;

          .foot-block {
            &:first-child {
              display: none;
            }
          }
        }
      }
    }
  }
}
